<template>
	<view>
		<uni-nav-bar fixed="true" title="创建群聊" color="#FFF" backgroundColor="#6869a8" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30" color="#FFF"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="body">
			<view class="header">
				群设置
			</view>
			<view class="title">
				群名称:
			</view>
			<u-input fontSize="30" maxlength="14" v-model="group.groupName" placeholder="请输入群名..." border="bottom">
			</u-input>
			<view class="title">
				群头像:
			</view>
			<image :src="group.avatar" mode="aspectFill" class="avatar" @click="selectImg"></image>
			<view class="title">
				进群方式:
			</view>
			<u-radio-group v-model="group.needVerify" placement="column">
				<u-radio activeColor='#6869a8' customStyle="margin:20rpx 0" :size="37" :iconSize="37" :labelSize="37"
					v-for="(item,index) in verfy" :key="index" :label="item.name" :name="item.type">
				</u-radio>
			</u-radio-group>
			<view class="title">
				群描述:
			</view>
			<u-textarea v-model="group.description" placeholder="群描述..." count height="120"></u-textarea>
			<view class="btn" hover-class="btn_hover" @click="create">
				创 建
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				verfy: [{
					name: "任何人都可加入",
					type: 0
				}, {
					name: "经审核加入",
					type: 1
				}, {
					name: "不可加入",
					type: 2
				}],
				group: {
					groupName: "",
					avatar: "../../static/logo.png",
					needVerify: 1,
					description: "",
				}
			}
		},
		methods: {
			create() {
				if (this.group.groupName === "") {
					uni.showToast({
						icon: "none",
						title: "必须输入群名称"
					});
					return;
				}
				this.$request.TokenRequest({
					url: "/group/createGroup"
				}, this.group).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "创建成功"
						})
						uni.navigateBack({})
					} else {
						uni.showToast({
							icon: "error",
							title: res.message
						})
					}
				})
			},
			selectImg() {
				let self = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success(res) {
						// console.log(JSON.stringify(res.tempFilePaths))
						self.uploadImg(res.tempFilePaths[0])
					}
				})
			},
			uploadImg(imgpath) {
				this.$util.uploadFile(imgpath).then(res => {
					this.group.avatar = res
				}).catch(err => {
					console.log(err)
					uni.showToast({
						icon: 'error',
						title: "图片上传失败"
					})
				})
			},
			back() {
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 90%;
		margin: 0 auto;

		.header {
			font-size: 50rpx;
			font-weight: bold;
			padding: 20rpx 0;
		}

		.title {
			font-size: 40rpx;
			padding: 20rpx 0;
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		/deep/.u-textarea__field {
			font-size: 30rpx;
		}

		.btn {
			font-size: 35rpx;
			color: #FFFFFF;
			background-color: #8b8de1;
			width: 70%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			padding: 15rpx;
			border-radius: 20rpx;
			margin: 100rpx auto;
		}

		.btn_hover {
			background-color: #6869a8;
		}
	}
</style>
